The :lang() pseudo-class in CSS allows you to target elements based on their language attribute (lang). This is useful for applying language-specific styling, such as font, text direction, or typographic rules.

Key Points About :lang()

1
:lang(language-code) – Selects elements whose language matches the specified code, e.g., :lang(en) for English or :lang(fr) for French.
2
Matches both the lang attribute on the element and inherited language from parent elements.
3
Useful for internationalization, styling multilingual content differently.

Example: Styling Based on Language

In this example, the English paragraph uses Arial and navy text, while the French paragraph uses Times New Roman and dark red text, demonstrating language-specific styling with :lang().

Best Practices

1
Use :lang() for multilingual websites to enhance readability and cultural appropriateness.
2
Combine with other pseudo-classes like :first-letter or :first-line for detailed typographic styling.
3
Ensure correct lang attributes are set on elements to make this pseudo-class effective.
4
Test across browsers as support is broad but always verify inherited language behavior.

Difficulty: 3/10

Topics: language targeting, CSS pseudo-classes, internationalization

Scenario Questions

0-2 years experience

1
You're building a bilingual blog where French paragraphs need italic styling — how would you use :lang() to target them correctly?
2
A user reports that Spanish text isn't showing the right font — you see the HTML has lang='es', but your CSS uses :lang(spanish). What's wrong?
3
How would you write a CSS rule to apply a different quotation style only to German text inside a div with lang='de'?

2-5 years experience

1
Our multilingual app has dynamic content loaded via API — sometimes the lang attribute is missing or inconsistent. How would you debug why :lang() styles aren't applying in production?
2
We're using :lang() to adjust punctuation spacing for Japanese vs English, but users on iOS Safari report inconsistent rendering. What could be causing this, and how would you fix it?
3
A designer wants to use :lang() to change font weights for Arabic text, but the site also uses a CMS that sometimes outputs lang='ar-SA' and other times lang='ar'. How would you handle this ambiguity?

5-8 years experience

1
We're redesigning our global content platform and need to support over 20 languages with custom typography. How would you architect the CSS strategy using :lang() without creating a maintenance nightmare?
2
A performance audit shows our CSS bundle is bloated because we're using dozens of :lang() rules. What alternatives or optimizations would you consider, and what tradeoffs do they introduce?
3
We're migrating from a legacy system that used class-based language targeting to :lang(). What edge cases in content rendering or CMS output might break during this transition?

8+ years experience

1
Our company supports 50+ languages across 10 products — how would you standardize language-based styling across teams without creating CSS fragmentation or accessibility gaps?
2
We're considering deprecating class-based language styling in favor of :lang(), but legacy content has inconsistent lang attributes. How would you design a migration plan that minimizes UX impact and ensures compliance?
3
How would you advocate for :lang() as a core accessibility and internationalization primitive in our design system, and what metrics would you track to prove its impact across regions?

Follow-up Questions

❓What happens if the HTML lang attribute is missing or misspelled?
❓Can :lang() match nested elements with different languages?
❓How would you debug a :lang() rule that isn't applying?